<template>
    <div>
        <div class="background">
            <section class="header">
                <video autoplay loop class="void-background" muted plays-inlne>
                    <source src="../mv/G1s.mp4" type="video/mp4"/>
                    浏览器不支持 video 标签，建议升级浏览器。
                </video>
            </section>
        </div>
        <div style="text-align: center; margin-top: 100px;">
            <el-card style="width: 360px;margin: 0 auto; border-radius: 50px; background: rgba(255,255,255,0.8);">
                <el-form :model="character" ref="registerForm" inline>
                    <!--            <el-upload-->
                    <!--                    class="avatar-uploader"-->
                    <!--                    action="http://localhost:8089/api/file/upload"-->
                    <!--                    :show-file-list="false"-->
                    <!--                    :on-success="handleAvatarSuccess"-->
                    <!--                    :before-upload="beforeAvatarUpload">-->
                    <!--                <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
                    <!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                    <!--            </el-upload>-->
                    <br>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="character.name" placeholder="请输入姓名" style="width: 210px;"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item prop="gender" label="姓别">
                        <el-select v-model="character.gender" style="width: 210px;">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <el-form-item prop="identity" label="身份">
                        <el-select v-model="character.identity" style="width: 210px;">
                            <el-option label="剑客" value="剑客"></el-option>
                            <el-option label="法师" value="法师"></el-option>
                            <el-option label="刀客" value="刀客"></el-option>
                            <el-option label="拳师" value="拳师"></el-option>
                            <el-option label="治疗师" value="治疗师"></el-option>
                            <el-option label="神人" value="神人"></el-option>
                            <el-option label="玉帝" value="玉帝"></el-option>
                            <el-option label="女娲" value="女娲"></el-option>
                            <el-option label="盘古" value="盘古"></el-option>
                            <el-option label="天兵天将" value="天兵天将"></el-option>
                            <el-option label="魔帝" value="魔帝"></el-option>
                            <el-option label="妖王" value="妖王"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <el-form-item label="诗词" prop="poetry">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="character.poetry">
                        </el-input>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-button style="border-radius: 10px;" type="primary" @click="add">添加</el-button>
                        <el-button style="border-radius: 10px;" type="primary" @click="$router.push('/index')">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "add",
        data() {
            return {
                character: {},
                imageUrl: '',
            }
        },
        methods: {
            // handleAvatarSuccess(res, file) {
            //     console.log(file)
            //     console.log(res)
            //     this.imageUrl = URL.createObjectURL(file.raw);
            //     this.imageUrl = "D://upload/79673467-cec1-4882-8a47-a90df912cf53.jpg"
            //     this.FileInfo.imageUrl = this.imageUrl;
            // },
            // beforeAvatarUpload(file) {
            //     const isJPG = file.type === 'image/jpeg';
            //     const isLt2M = file.size / 1024 / 1024 < 2;
            //
            //     if (!isJPG) {
            //         this.$message.error('上传头像图片只能是 JPG 格式!');
            //     }
            //     if (!isLt2M) {
            //         this.$message.error('上传头像图片大小不能超过 2MB!');
            //     }
            //     return isJPG && isLt2M;
            // },
            add() {
                // 前端表单验证
                this.$refs.registerForm.validate((valid) => {
                    if (valid) {
                        console.log(this.character)
                        // 表单验证通过后，调用后端接口
                        this.$axios.post('/api/character/add', this.character).then(res => {
                            console.log(res)
                            if (res.data.status === 1) {
                                this.$router.go(0);
                                this.$message.success(res.data.msg);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        this.$message.error('请填写完整内容');
                        return false;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    @import "../css/add.css";
</style>